<template>
  <div class="container">
    <mt-swipe :auto="0" >

        <mt-swipe-item  v-for="item in imgs">
            <img v-bind:src="item.img || item.src" alt="" @load="resize()" ref='img'>
        </mt-swipe-item>
        
    </mt-swipe>
  </div>
</template>
<script>
export default {
  props: ['imgs'],
  methods:{
    resize(){
      var nw = this.$refs.img[0].naturalWidth,
          nh = this.$refs.img[0].naturalHeight,
          bc = nw / nh;
      var h = document.body.offsetWidth / bc;
      document.querySelector('.mint-swipe').style.height = h + 'px';
    }
  }
}
</script>
<style scoped>
.mint-swipe{
    width: 100%;
    height: 200px;
    background-color: red;
}
.mint-swipe img{
width: 100%;
height: 100%;
}
</style>
